<template>
	<view class="questDetail">
		<navBar isBack title="大家都在问" backColor="#333" color="#333" background="#fff"></navBar>
		<view class="title">
			<view class="text">
				<span>问</span>
				<view class="right">
					{{Detailes.title}}
					<p>{{$utils.getFormatDate(Detailes.create_time*1000,'yyyy-MM-dd')}}</p>
				</view>
			</view>
		</view>
		
		<!-- 回答列表 -->
		<view class="answerList">
			<view class="topText">
				<image :src="`${baseImg}/static/onePlusN/answer.png`" mode=""></image>
				共{{answerList.length}}个回答
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in answerList" :key="index">
					<view class="top">
						<view class="left">
							<image :src="item.user_id.avatar.path" mode=""></image>
							{{item.user_id.username}}
						</view>
						{{$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd')}}
					</view>
					<view class="answerTxt">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn1" @click="toPutQuest">
				<image :src="`${baseImg}/static/onePlusN/quest.png`" mode=""></image>
				我要提问
			</view>
			<view class="btn2" @click="toAnswer">
				<image :src="`${baseImg}/static/onePlusN/answerBtn.png`" mode=""></image>
				我来回答
			</view>
		</view>
	</view>
</template>

<script>
	import service_oneN from '@/service/oneN.js'
	export default{
		data(){
			return{
				baseImg:'http://manager.ryz1620.com',
				page:1,
				pagesize:10,
				estate_id:null,
				question_id:null,
				answerList:[],
				Detailes:''
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id;
			this.question_id = options.question_id
			this.QuestDetailes()
			this.getAnswerList()
		},
		onShow() {
			this.getAnswerList()
		},
		methods:{
			// 获取回答列表
			getAnswerList(){
				let params = {
					question_id:this.question_id,
					page:this.page,
					pagesize:this.pagesize
				}
				service_oneN.getAnswerList(params).then(res=>{
					console.log(res,'回答列表')
					if(res.code==1){
						this.answerList = res.data?res.data:[]
					}
				})
			},
			// 提问详情
			QuestDetailes(){
				let params = {
					question_id:this.question_id,
				}
				service_oneN.QuestDetailes(params).then(res=>{
					console.log(res,'提问详情')
					if(res.code==1){
						this.Detailes = res.data
					}
				})
			},
			// 我要提问
			toPutQuest(){
				uni.navigateTo({
					url:'putQuest?estate_id='+this.estate_id
				})
			},
			
			// 我来回答
			toAnswer(){
				uni.navigateTo({
					url:'toAnswer?question_id='+this.question_id +'&title='+this.Detailes.title
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.questDetail{
		height: 100%;
		background-color: #fff;
		.title{
			box-shadow: 0rpx 6rpx 16rpx rgba(0, 0, 0, 0.03);
			padding: 40rpx 32rpx;
			.text{
				font: 500 28rpx/32rpx PingFang SC;
				color: #333;
				display: flex;
				span{
					text-align: center;
					margin-right: 12rpx;
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					color: #fff;
					font: 500 20rpx/32rpx PingFang SC;
					background-image:linear-gradient(180deg, #FFCC60 0%, #FA8D38 100%) ;
				}
				.right{
					p{
						margin-top: 24rpx;
						color: #939393;
						font: 400 22rpx/40rpx PingFang SC;
					}
				}
			}
		}
		
		// 回答列表
		.answerList{
			padding: 0 32rpx;
			.topText{
				display: flex;
				align-items: center;
				padding: 60rpx 0rpx 32rpx;
				image{width: 32rpx;height: 32rpx;margin-right: 12rpx;}
				font:500 28rpx/48rpx PingFang SC;
				color: #333333;
			}
			.list{
				.item{
					border-bottom: 2rpx solid #F4F4F4;
					padding: 28rpx 0rpx;
					.top{
						display: flex;
						font: 400 22rpx/20rpx PingFang SC;
						color: #939393;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							image{
								margin-right: 16rpx;
								width: 56rpx;
								height: 56rpx;
								border-radius: 50%;
							}
							color: #6C6C6C;
						}
					}
					.answerTxt{
						padding-left: 8rpx;
						font: 400 24rpx/48rpx PingFang SC;
						color: #333;
					}
				}
			}
		}
		
		.btn{
			width: 100%;
			height: 136rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 32rpx;
			display: flex;
			box-shadow: 0px -6rpx 16rpx rgba(0, 0, 0, 0.04);
			justify-content: space-between;
			align-items: center;
			height: calc(136rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(136rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			view{
				width: 330rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 44rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				font: 600 32rpx/52rpx PingFang SC;
			}
			.btn1{
				border: 2rpx solid #C3AB7C;
				color: #C3AB7C;
			}
			.btn2{
				background-color: #C3AB7C;
				color: #fff;
			}
		}
	}
</style>
